<template>
  <div class="content">
    <div @click="goLeft" class="btn">&lt;</div>
    <div class="container">
      <div
        class="item"
        v-for="(item, index) in initArr"
        :key="index"
        @click="seleteMenu(item)"
      >
        {{ `卡片${item}` }}
      </div>
    </div>
    <div @click="goRight" class="btn">&gt;</div>
  </div>
</template>

<script>
export default {
  name: "tabCart_demo",
  data() {
    this.maxLength = 5;
    this.fetchData = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    return {
      initArr: [],
    };
  },
  mounted() {
    for (let i = 0; i < this.maxLength; i++) {
      if (this.fetchData[i]) {
        this.initArr.push(this.fetchData[i]);
      }
    }
  },
  methods: {
    goLeft: function() {
      const firstData = this.initArr[0];
      console.log(firstData);
      const newArr = [...this.initArr];
      if (firstData === this.fetchData[0]) return;
      newArr.unshift(firstData - 1);
      newArr.pop();

      this.initArr = newArr;
    },
    goRight: function() {
      const endData = this.initArr[this.initArr.length - 1];
      console.log(endData);
      const newArr = [...this.initArr];
      if (endData === this.fetchData[this.fetchData.length - 1]) return;
      newArr.shift();
      newArr.push(endData + 1);

      this.initArr = newArr;
    },
    seleteMenu() {},
  },
  // watch:{
  //     initArr:{
  //         handler(newValue,preValue){
  //             console.log(newValue,preValue)
  //         }
  //     }
  // }
};
</script>

<style>
.content {
  display: flex;
  align-items: center;
  margin: 50px auto;
}
.btn {
  margin: 0 10px;
  width: 60px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background-color: #f4f4f5;
}
.btn:hover {
  cursor: pointer;
}

.container {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  width: 550px;
  height: 70px;
  /* border: 1px solid crimson; */
}
.item {
  width: 100px;
  height: 70px;
  text-align: center;
  line-height: 70px;
  border: 1px solid black;
  background-color: skyblue;
}
</style>
